<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="_THEMES_/blog/static/layui/css/layui.css" />
    <link rel="stylesheet" href="_THEMES_/blog/static/css/home.css" />
    <script type="text/javascript" src="_THEMES_/blog/static/js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="_THEMES_/blog//static/layui/layui.js" ></script>
    <script type="text/javascript" src="_THEMES_/blog/static/js/home.js" ></script>
  </head>
  <body>
    {include file="common/nav" /}
    <div class="layui-tab  layui-tab-brief" style="width:1200px;height:auto;margin:0 auto;background: #FFFFFF;margin-top:30px;margin-bottom:200px">
      <ul class="layui-tab-title">
        <li class="layui-this">邮箱注册</li>
        <li>忘记密码</li> 
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <blockquote class="layui-elem-quote" style="background: #FFFFFF;">
            <form id="email-data" class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" id="email" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><button id="code-email" class="layui-btn layui-btn-normal layui-btn-sm">发送验证码</button></div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" name="code" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请在邮箱内查收验证码</div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="pwd" id="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">（6-20个字符）</div>
              </div>
              <!--<div class="layui-form-item">
                <label class="layui-form-label">重复密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="repwd"  id="repwd" required lay-verify="required" placeholder="请重复输入密码" autocomplete="off" class="layui-input">
                </div>
              </div>-->
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="emailData">立即注册</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
          </blockquote>
        </div>
        <div class="layui-tab-item">
          <blockquote class="layui-elem-quote" style="background: #FFFFFF;">
            <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" id="pwdRetrieveEmail" name="email" placeholder="请输入邮箱" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><button type="button" onclick="pwdSendEmail()" class="layui-btn layui-btn-normal layui-btn-sm">发送验证码</button></div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                  <input type="text" name="code" placeholder="请输入验证码"  class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请注意查收验证码</div>
              </div>                 
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="pwdRetrieve">找回密码</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>         
          </blockquote>
        </div> 
      </div>
    </div>
    <script>
      layui.use("layer");
      //发送找回密码邮箱验证码
      function pwdSendEmail(){
        var email = $("#pwdRetrieveEmail").val();
        $.ajax({
          type:"post",
          data:"email="+email,
          url:"/home/index/pwdSendEmail",
          success:function(e){
            layer.msg(e.msg);
          }
        });
      }
      //找回密码
      layui.use('form', function(){
        var form = layui.form;
        form.on('submit(pwdRetrieve)', function(data){
          $.ajax({
            type:"post",
            data:data.field,
            url:"/home/index/pwdRetrieve",
            success:function(e){
              if(e.code == 1){
                layer.confirm(e.msg, {
                  btn: ['记住了','关闭'] //按钮
                });
              }else{
                layer.msg(e.msg);
              }
            }
          });
          return false;
        });
      });
      //倒计时器
      function Timer(obj) {
        $("#code-time").attr("disabled", "true")
        var time = 60;
        var timestap = "";
        var interval = setInterval(function() {
          if(timestap == "") {
            timestap = time - 1;
          } else {
            timestap = timestap - 1;
          }
          if(timestap == 0) {
            $(obj).removeAttr('disabled');
            $(obj).text("发送验证码");
            clear();
          } else {
            $(obj).text("获取验证(" + timestap + ")")
          }

        }, 1000);

        function clear() {
          clearInterval(interval)
        };
      }

      //发送验证码
      $("#code-email").click(function(){
        var Email = $("#email").val();
        $.ajax({
          type:"post",
          url:"/home/index/regSendEmail",
          data:"email="+ Email,
          success:function(e){
            switch(e.code)
                {
              case 1:
                Timer("#code-email" );
                $("#code-email").attr("disabled","disabled");
                layer.msg(e.msg);
                break;
              case 0:
                layer.msg(e.msg);
                break;                      
            }

          }                     
        });
        return false;
      });

      layui.use('form', function(){
        var form = layui.form;
        var password1 = $("#pwd").val();
        var password2 = $("#repwd").val();
        form.on('submit(emailData)', function(data){
          $.ajax({
            type:"post",
            url:"/home/index/register",
            data:data.field,
            success:function(e){
              switch(e.code)
                  {                   
                case 0:
                  layer.msg(e.msg);
                  break;                    
                case 1:
                  layer.msg(e.msg);
                  setTimeout(function(){  location.href = "/"; }, 2000);
                  break;
              }
            }
          });
          //layer.msg(data.field);
          return false;
        });
      });
    </script>
    {include file="common/footer" /}
  </body>
</html>
